const path = require('path');

const isProd = process.env.NODE_ENV === 'production';
const ThemeColorReplacer = require('webpack-theme-color-replacer');
const { getThemeColors, modifyVars } = require('./src/utils/theme');
// 判断打包时运行一个查看项目大小的服务
const IS_OPEN_PREVIEW_PLUGIN = process.argv.slice(-1)[0] === '--IS_OPEN_PREVIEW_PLUGIN';

function resolve(dir) {
  return path.join(__dirname, dir);
}

function previewBuild() {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  return new BundleAnalyzerPlugin();
}

const assetsCDN = {
  externals: {
    axios: 'axios',
    qs: 'Qs'
  },
  css: [],
  js: [
    'https://cdn.staticfile.org/axios/0.18.0/axios.min.js',
    'https://cdn.bootcss.com/qs/6.7.0/qs.min.js'
  ]
};

function openGzip() {
  const CompressionWebpackPlugin = require('compression-webpack-plugin');
  const compress = new CompressionWebpackPlugin({
    filename: '[path].gz[query]',
    threshold: 10240,
    minRatio: 0.8,
    test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
    deleteOriginalAssets: false
  });
  return compress;
}

module.exports = {
  outputDir: 'dist', // 配置打包目录
  publicPath: './', // 打包运行环境的根路径为/dist
  assetsDir: 'state', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  indexPath: 'index.html', // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
  productionSourceMap: false, // 生产环境阻止升成map
  devServer: {
    disableHostCheck: true,
    host: '0.0.0.0',
    port: 8000,
    open: false,
    https: false,
    hotOnly: true,
    proxy: {
      '/apis': {
        target: process.env.VUE_APP_WEB_URL,
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/apis': ''
        }
      }
    }
  },
  // 公共less
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [resolve('src/assets/styles/base/variables.less')]
    }
  },
  css: {
    // 是否分离css true:分离css，会造成css无法热更新，false：会把css打包进js中，js一更新css自然更新
    extract: process.env.NODE_ENV !== 'development',
    sourceMap: false,
    loaderOptions: {
      less: {
        // 配置全局css变量 或者 在css文件中添加
        lessOptions: {
          javascriptEnabled: true,
          modifyVars: modifyVars()
        }
      }
    }
  },
  configureWebpack() {
    const config = {
      plugins: [
        openGzip(),
        new ThemeColorReplacer({
          fileName: 'css/theme-colors-[contenthash:8].css', // 输出css文件名，支持[contenthash]和[hash]。
          matchColors: getThemeColors(), // 用于提取 css 文件的颜色数组，支持 rgb 和 hsl。
          injectCss: true // 将 css 文本注入 js 文件，不再需要下载 `theme-colors-xxx.css`
        })
      ]
    };
    if (IS_OPEN_PREVIEW_PLUGIN) {
      config.plugins.push(previewBuild());
    }
    if (isProd) {
      config.externals = assetsCDN.externals;
    }
    return config;
  },
  chainWebpack(config) {
    if (isProd) {
      config.plugin('html').tap(args => {
        args[0].cdn = assetsCDN;
        return args;
      });
    }
    if (isProd) {
      config.optimization.splitChunks({
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 300000, // 依赖包超过300000bit将被单独打包
        automaticNameDelimiter: '-',
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
              return `chunk.${packageName.replace('@', '')}`;
            },
            priority: 10
          }
        }
      });
    }
    config.plugin('html').tap(args => {
      args[0].NODE_ENV = process.env.NODE_ENV;
      args[0].HUAWEI_SITE_MONITOR_APPID = process.env.VUE_APP_HUAWEI_SITE_MONITOR_APPID;
      return args;
    });
    config.module.rules.delete('svg'); // 重点:删除默认配置中处理svg,
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/svg')) // 表示目录中的文件需要进行 svg-sprite-loader
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      });
  }
};
